import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
mapboxgl.accessToken ='pk.eyJ1Ijoid3p5YW5ndXN0IiwiYSI6ImNsNmRvN285YjA3cGozZ214MmVhMHlmOGIifQ.77ZY4WjcbmtmmPCkHO8xRA';


// // 关于marker标记的库函数(采用``注释的, 方便查看)
// `marker.addTo(map)` // 将标记添加到地图的结果坐标处参数为map接口
// `marker.remove()` // 删除标记

// `marker.setLngLat([lng,lat])` // 设置标记的经纬度(即显示位置), 参数是数组
// `marker.setPopup(popup)` // 设置弹出的窗口(比如可显示标记的一些信息), 参数为Popup(html)接口
// `marker.setOffset([0,-15])` // 设置标记偏移量, 具体效果和上面的offset一样
// `marker.setDraggable(true)` // 设置是否可拖动标记
// `marker.setRotation(0)` // 设置旋转度数
// `marker.setOccludedOpacity(0.2)` // 设置透明度

// `marker.getLngLat().lng` // 获取标记的经度
// `marker.getLngLat().lat` // 获取标记的纬度
// `marker.getPopup()` // 获取Popup接口
// `marker.getOffset()` // 获取标记偏移量
// `marker.getRotation()` // 获取旋转度数
// `marker.getOccludedOpacity()` // 获取透明度
// `marker.getElement()` // 获取标记的html标签

// `marker.togglePopup()` // 切换Popup接口的状态, 打一个这个函数后, Popup就会消失(即点击鼠标不会再弹出窗口), 如果再打一个又可以切换到显示状态
// `marker.isDraggable()` // 判断是否可以拖动, 若可以, 返回true

// // 关于marker的事件触发
// `marker.dragstart` // 拖动开始时
// `marker.drag` // 拖动途中
// `marker.dragend` // 拖动结束时

export const text4 = () => {
    const start = {
        center: [104.696, 31.538], // 初始显示坐标 [经度, 维度]
        zoom: 7, // 放大倍数
        antialias: true, // 是否抗锯齿, 默认false
        pitch: 10, // 设置倾斜程度
        bearing: 0, //设置地图朝向,0为朝北,90为西,180为南,270为东
    };

    // 调用mapbox地图,命名为map
    const map = new mapboxgl.Map({
        container: 'map', // 容器名字为map
        // 从地图盒的核心样式中进行选择，或使用地图盒工作室制作自己的样式
        style: 'mapbox://styles/wzyangust/clh8jozyi00wp01pr1mjt6eeo', // mapbox自己制作的地图样式
        // 使用...的方式调用地图属性对象
        ...start
    });
    const geocoder = new MapboxGeocoder({
        //这里的marker设置属性方式和下面的一样, 但是这个标记会随着重新搜索而消失，并不会储存
        //如果要储存标记, 需要在map.on中设置geocoder属性，例如采用下面的方式
        marker: {
            color: '#008000'
        },
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
    });
    map.addControl(geocoder, 'top-right'); //添加搜索功能组件
    // 渲染加载地图
    map.once('load', () => {
        // 侦听来自地理编码器的“结果”事件, 即 'result'
        // “结果”事件在用户做出选择时触发
        // 在结果坐标处添加标记
        geocoder.on('result', (event) => {
            // 创建标签
            // const el = document.createElement('img');
            // el.src = '图片地址';
            // el.width = 90;
            // el.height = 90;

            // 创建标记对象
            let marker = new mapboxgl.Marker({
                // 里面的属性为可选项, 可要可不要, 不用全部写出
                anchor: 'center', //设置标记距离坐标位置, 默认为'center', 比如可填'right'就会在经纬度的右边显示标记
                offset: [0, -15], //和anchor类似，设置偏移长度[x,y], 默认为[0,-15] 
                color: '#008000', //设置颜色, 默认为'#3FB1CE' 浅蓝色
                draggable: false, //设置是否可以拖动标记, 默认为false
                scale: 1, //设置放大倍数, 默认为1, 即1倍(不放大不缩小)
                rotation: 0, //顺时针旋转标记, 该数值为旋转度数, 默认为0度

                /* 更改标记的外观, el的属性为html的某个标签,
                   需要采用document.createElement()的方式, 例如上面的el 
                   默认为<svg>标签中的浅蓝色液滴形 即false */
                // element: el,
                element: false,

                occludedOpacity: 0.2, //若存在3D地图, 这个数值代表被3D地形遮挡后的透明度, 1为不透明, 0为透明(猜的,我还没试过) 默认为0.2
                pitchAlignment: 'auto', //我不知道这个是啥, 也不知道怎么改, 但是它默认为'auto'
                rotationAlignment: 'auto', //和上面那个一样, 我也不知道这个是啥, 也不知道怎么改, 但是它默认为'auto'
            });
            // 添加标记
            let point = event.result.center; // 捕获结果坐标
            marker.setLngLat(point).addTo(map); // 将标记添加到地图的结果坐标处 
            marker.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>")) //鼠标点击标记, 即可显示<h1>标签的"hello world"

        });
    });
}